<!-- 会员- 新增会员 - 弹窗组件 -->
<template>
  <div>
    <CustomDialog v-model:visible="isShowDialog" top="2vh" curent-class="create-vip-dialog">
      <div class="dialog-content">
        <div class="title">新增会员</div>
        <div class="form-box">
          <div class="form-item">
            <div class="label">
              <span>*</span>
              <div>姓名</div>
            </div>
            <el-input
              class="input"
              v-model="vipFormData.nick_name"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </div>
          <div class="form-item">
            <div class="label">
              <span>*</span>
              <div>手机号</div>
            </div>
            <el-input
              class="input"
              v-model="vipFormData.mobile"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </div>
          <div class="form-item">
            <div class="label">
              <div>会员类型</div>
            </div>
            <el-select
              class="select"
              v-model="vipFormData.grade_id"
              placeholder="请选择会员类型"
              clearable
            >
              <el-option
                v-for="(item, index) in memberTypeList"
                :key="item.grade_id + index"
                :label="item.name"
                :value="item.grade_id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="form-item">
            <div class="label">
              <div>初始积分</div>
            </div>
            <el-input
              class="input"
              v-model="vipFormData.points"
              placeholder="请输入初始积分"
              clearable
            ></el-input>
          </div>
          <div class="form-item">
            <div class="label">
              <div>性别</div>
            </div>
            <el-select
              class="select"
              v-model="vipFormData.gender"
              placeholder="请选择性别"
              clearable
            >
              <el-option
                v-for="(item, index) in sexOptionsList"
                :key="item.value + index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="form-item">
            <div class="label">
              <div>出生日期</div>
            </div>
            <el-date-picker
              class="select"
              v-model="vipFormData.birthday"
              type="date"
              placeholder="选择出生日期"
              clearable
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="dinerDialog-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div
          class="confirm-btn"
          @click="onConfirm"
          :class="{ loading: submitLoading }"
          :disabled="submitLoading"
        >
          {{ submitLoading ? '提交中...' : '确定' }}
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { formTestFun, checkPhoneNumber, throttle } from '@/utils/toolsValidate'
import * as memberApi from '@/api/member'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'onCancel'): void
  (e: 'onSuccess'): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false
})

const emit = defineEmits<Emits>()

// 控制弹窗显示
const isShowDialog = computed({
  get: () => props.visible,
  set: val => emit('update:visible', val)
})

// 提交loading状态
const submitLoading = ref(false)

// 新建会员的表单数据
const vipFormData = reactive({
  mobile: '', // 手机号
  nick_name: '', // 姓名
  grade_id: '', // 会员等级
  points: '', // 积分
  gender: '', // 性别
  birthday: '' // 生日
})

// 会员性别枚举列表
const sexOptionsList = ref([
  {
    value: '1',
    label: '男'
  },
  {
    value: '2',
    label: '女'
  }
])

// 会员等级类型列表
const memberTypeList = ref<any[]>([])

// 监听弹窗显示状态
watch(
  () => props.visible,
  newVal => {
    if (newVal) {
      getMemberGradeList()
    }
  }
)

// 确认提交事件
const onConfirm = throttle(() => {
  const testForm = {
    请输入姓名: vipFormData.nick_name,
    请输入手机号码: vipFormData.mobile,
    请输入正确的手机号码: checkPhoneNumber(vipFormData.mobile)
  }
  if (formTestFun(testForm)) return

  submitLoading.value = true
  memberApi
    .memberAdd({
      form: vipFormData
    })
    .then(res => {
      if (res.status === 200) {
        ElMessage.success('新增会员成功')
        emit('update:visible', false)
        emit('onSuccess')
        // 重置表单
        vipFormData.mobile = ''
        vipFormData.nick_name = ''
        vipFormData.grade_id = ''
        vipFormData.points = ''
        vipFormData.gender = ''
        vipFormData.birthday = ''
      }
    })
    .catch(error => {
      console.error('新增会员失败:', error)
    })
    .finally(() => {
      submitLoading.value = false
    })
}, 300)

// 取消操作
const onCancel = () => {
  emit('onCancel')
  emit('update:visible', false)
}

// 获取会员等级数据
const getMemberGradeList = () => {
  memberApi
    .fetchMemberAll()
    .then(res => {
      if (res.status === 200) {
        memberTypeList.value = res?.data?.list?.length > 0 ? res.data.list : []
      }
    })
    .catch(error => {
      console.error('获取会员等级列表失败:', error)
    })
}
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  border-radius: 12px;
}

.dialog-content {
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #000000;
    margin-bottom: 10px;
  }

  .form-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1000px;

    .form-item {
      display: flex;
      align-items: center;
      margin-top: 20px;

      .label {
        width: 80px;
        display: flex;
        align-items: flex-start;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #000;

        > span {
          color: #7c0a03;
        }

        margin-right: 10px;
      }

      .input,
      .select {
        width: 200px;
        border-radius: 12px;
      }
    }
  }
}

.dinerDialog-bottom-btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;

  .cancel-btn {
    width: 134px;
    height: 52px;
    line-height: 52px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 12px;
    font-size: 18px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    cursor: pointer;
  }

  .confirm-btn {
    width: 132px;
    height: 52px;
    background: #7c0a03;
    line-height: 52px;
    border-radius: 12px;
    font-size: 18px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    margin-left: 40px;
    cursor: pointer;

    &.loading {
      background: #cccccc;
      cursor: not-allowed;
    }

    &:disabled {
      background: #cccccc;
      cursor: not-allowed;
    }
  }
}
</style>

<style lang="scss">
.create-vip-dialog {
  max-height: unset !important;
}
</style>
